<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><img src="images/logo.png" alt=""></div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="images/help.png" class="layui-nav-img">帮助
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="images/user2.png" class="layui-nav-img us">昵称
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="./images/out.png"  class="layui-nav-img">
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-tab">
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <div class="look">
                    <img src="images/big.png" class="work work-look1">
                    <img src="images/big.png" class="work work-look2">
                </div>
                <ul class="layui-nav layui-nav-tree layui-tab-title left_tab"  lay-filter="test">
                    <li class="layui-nav-item layui-this">
                        <img src="images/work.png" class="work"><span>工作台</span>
                    </li>
                    <li class="layui-nav-item">
                        <img src="images/num.png" class="work"><span>数据管理</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body SJDP layui-tab-content Num">
            <!-- 内容主体区域 -->
            <div class="layui-tab-item layui-show">
                <ul class="cont">
                    <li class="cont-li">
                        <div class="cont-top">数据大屏</div>
                        <div class="cont-bottom">
                            <div class="contB-left"><img src="images/sj.png" alt=""></div>
                            <div class="contB-right">
                                <a href="num.html"><div class="kuang">进入</div></a>
                                <div class="kuang">创建</div>
                            </div>
                        </div>
                    </li>
                    <li class="cont-li">
                        <div class="cont-top">移动文档</div>
                        <div class="cont-bottom">
                            <div class="contB-left"><img src="images/pho.png" alt=""></div>
                            <div class="contB-right">
                                <div class="kuang">进入</div>
                                <div class="kuang">创建</div>
                            </div>
                        </div>
                    </li>
                    <li class="cont-li">
                        <div class="cont-top">动态PPT</div>
                        <div class="cont-bottom">
                            <div class="contB-left"><img src="images/ppt.png" alt=""></div>
                            <div class="contB-right">
                                <div class="kuang">进入</div>
                                <div class="kuang">创建</div>
                            </div>
                        </div>
                    </li>
                    <li class="cont-li">
                        <div class="cont-top">移动门户</div>
                        <div class="cont-bottom">
                            <div class="contB-left"><img src="images/door.png" alt=""></div>
                            <div class="contB-right">
                                <div class="kuang">进入</div>
                                <div class="kuang">创建</div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="layui-tab-item" style="background-color: #fff">
                <div class="layui-tab layui-tab-brief lTop" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">数据库</li>
                        <li>第三方接口</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="SJ-top">
                                <div class="SJT-left">
                                    <div>全部数据库<span>0</span>个</div>

                                </div>
                                <div class="SJT-right">
                                    <button type="button" class="layui-btn layui-btn-radius layui-btn-primary">
                                        <i class="layui-icon">&#xe654;</i> 新建数据源
                                    </button>
                                    <div class="SJT-ss">
                                        <input type="text" class="suos"  placeholder="请输入关键字">
                                        <i class="iconfont ic">&#xe618;</i>
                                    </div>

                                </div>
                            </div>

                        </div>
                        <di class="layui-tab-item">
                            <div class="SJ-top">
                                <div class="SJT-left">
                                    <div>全部第三方接口<span>0</span>个</div>

                                </div>
                                <div class="SJT-right">
                                    <button type="button" class="layui-btn layui-btn-radius layui-btn-primary">
                                        <i class="layui-icon">&#xe654;</i> 新建组
                                    </button>
                                    <div class="SJT-ss">
                                        <input type="text" class="suos" placeholder="请输入关键字">
                                        <i class="iconfont ic">&#xe618;</i>
                                    </div>

                                </div>
                            </div>

                        </di>

                    </div>
                </div>
            </div>
        </div>
    </div>

<!--    <div class="layui-footer">-->
<!--        &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
<!--        © layui.com - 底部固定区域-->
<!--    </div>-->
</div>
</body>
<script src="js/layui.js"></script>
<script src="js/element.js"></script>
<script src="js/jquery.min.js"></script>
<!--<script src="js/login.js"></script>-->

<script>

    // 大屏自适应
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // docEl.style.fontSize = 100 * (1280 / 3840) + 'px';
                docEl.style.fontSize = 100 * (clientWidth / 3200) + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
    var i = 0;
    $('.layui-logo').click(function () {
        window.history.go(-1);
    })
    $('.look').click(function () {
        if (i == 0) {
            $('.layui-body').css({
                'left': '53px',
                'z-index': '1000',
                'transition': ' all 0.3s ease'
            })
            $('.work-look1').css({'visibility': 'visible'})
            i = 1;
        } else {
            $('.layui-body').css({'left': '200px', 'transition': ' all 0.3s ease'})
            $('.work-look1').css({'visibility': 'hidden'})
            i = 0;
        }

    })
	
</script>
</html>